<template>
	<div
		:style="{
			'grid-template-columns': `repeat(${column}, 1fr)`
		}"
		class='course-list'
	>
		<div
			class="course"
			v-for="item in filterCourse"
			:key="item.id"
		>
			<img
				class="img"
				@click="$pushTo('TransformPlan',{id: item.id})"
				:src="item.img"
			>
			<div class="name">{{item.name}}</div>
			<div
				v-if="showTags"
				class="tags"
			>
				<Tag
					class="tag"
					v-for="tag in item.tags"
					:key="tag.name"
					:bgColor="tag.bgColor"
					:color="tag.color"
				>
					{{tag.name}}
				</Tag>
			</div>
		</div>
	</div>
</template>

<script>
import { getCourses } from '@/api/course'
export default {
  props: {
    column: {
      type: Number,
      default: 3
    },
    filterTag: {
      type: Array,
      default: () => [0]
    },
    showTags: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      courses: []
    }
  },
  computed: {
    filterCourse() {
      if (this.filterTag.reduce((sum, val) => sum + val, 0) === 0) {
        return this.courses
      }
      return this.courses.filter(course => course.tags.find(tag => this.filterTag.indexOf(tag.id) > -1))
    }
  },
  created() {
    this.loadCourses()
  },
  methods: {
    loadCourses() {
      this.courses = getCourses()

      console.log(this.courses[ 0 ])
    }
  }
}
</script>

<style lang='scss' scoped>
.course-list {
  display: grid;
  grid-gap: 25px;

  .course {
    cursor: pointer;
  }

  .img {
    width: 100%;
    object-fit: contain;
  }

  .name {
    margin: 23px 0 12px;
    font-size: $sLarge;
    color: #003e34;
  }

  .tags {
    display: flex;

    .tag {
      &:not(:last-of-type) {
        margin-right: 8px;
      }
    }
  }
}
</style>
